<!-- 用户编辑弹窗 -->
<template>
  <div class='risk'>
    <a-modal
      width="600px"
      :footer='null'
      :visible="visible"
      :body-style="{ backgroundColor: '#1b384d' }"
      @update:visible="updateVisible"
      @cancel='updateVisible'
      destroyOnClose
    >
      <template #title>
        <div class='modalTitle'>工程审计问题风险</div>
      </template>

      <div style='height: 400px;display: flex;align-items: center;justify-content: center'>
        <div class="container-card">
          <div style='display: flex;justify-content: center'>
            高风险值：<span style='color:#fe5807;'>2</span>&nbsp;&nbsp;&nbsp;&nbsp;
            中风险值：<span style='color:#f7b647;'>2</span>&nbsp;&nbsp;&nbsp;&nbsp;
            低风险值：<span style='color:#47b0a8;'>2</span>
          </div>

          <div style='display: flex;margin: 20px 0px 5px 0px;'>
            <ul class="graph">
              <a-popover
                class="item"
                placement="top"
                v-for="(item, index) in infos"
                :key="index"
              >
                <template #content>
                  {{ item.name }}
                </template>
                <li :data-level="getLevel(item.value)" class="li-day" >{{item.value}}</li>
              </a-popover>
            </ul>

            <div class='process'></div>
            <div class='scale'>
              <div class='scaleItemItem'>-&nbsp;&nbsp;20</div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'>-&nbsp;&nbsp;15</div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'>-&nbsp;&nbsp;10</div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'>-&nbsp;&nbsp;5</div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'></div>
              <div class='scaleItem'>-&nbsp;&nbsp;0</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'riskModel',
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
  },
  data() {
    return {
      maxNum: 0,
      minNum: 0,
      infos: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initData()
    })
  },
  methods: {
    getLevel(value){
      let num = Math.floor(value / 2)
      return (num >= 10 ? 10 : num)
    },
    initData(){
      let myData = [
        {name: '合同要素不完善', value: 25, grade: '高'},
        {name: '合同要素不完善', value: 2.5, grade: '低'},
        {name: '合同要素不完善', value: 13, grade: '中'},
        {name: '合同要素不完善', value: 9.8, grade: '中'},
        {name: '合同要素不完善', value: 17.2, grade: '高'},
        {name: '合同要素不完善', value: 14.5, grade: '中'},
        {name: '合同要素不完善', value: 1.2, grade: '低'},
        {name: '合同要素不完善', value: 16.3, grade: '高'},
        {name: '合同要素不完善', value: 18.4, grade: '高'},
        {name: '合同要素不完善', value: 4, grade: '低'},
        {name: '合同要素不完善', value: 6.3, grade: '中'},
        {name: '合同要素不完善', value: 13.3, grade: '中'},
        {name: '合同要素不完善', value: 17.4, grade: '高'},
        {name: '合同要素不完善', value: 14, grade: '中'},
        {name: '合同要素不完善', value: 2, grade: '低'},
        {name: '合同要素不完善', value: 7.4, grade: '中'},
        {name: '合同要素不完善', value: 16, grade: '高'},
        {name: '合同要素不完善', value: 4.9, grade: '低'},
        {name: '合同要素不完善', value: 9.9, grade: '中'},
        {name: '合同要素不完善', value: 13, grade: '中'},
        {name: '合同要素不完善', value: 17, grade: '高'},
        {name: '合同要素不完善', value: 18, grade: '高'},
        {name: '合同要素不完善', value: 7, grade: '中'},
        {name: '合同要素不完善', value: 4, grade: '低'},
        {name: '合同要素不完善', value: 2.2, grade: '低'},
      ]
      // 找到具有最大 value 的对象
      this.maxNum = myData.reduce((max, current) => {
        return (current.value > max.value) ? current : max;
      }).value || 0;

      // 找到具有最小 value 的对象
      this.minNum = myData.reduce((min, current) => {
        return (current.value < min.value) ? current : min;
      }).value || 0;

      this.infos = myData
    },
    updateVisible() {
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style scoped lang='less'>
.modalTitle{
  background-image: url("../../../assets/img/modalBg.png");
  background-repeat: no-repeat;
  height: 53px;
  padding: 8px 24px 14px 30px;
  background-color: #2a4a61;
  color: #ffffff;
  font-weight: 600;
}
.risk {
  :global(.ant-modal-header) {
    padding: 0;
    border: 0;
  }
}

.container-card{
    color: #ffffff
}
.process{
  width: 20px;height: 300px;
  margin-left: 50px;
  background: linear-gradient(to bottom, #fe5807, #f7b647,#47b0a8);
}
.scale{
  height: 300px;
  display: grid;
}
.scaleItem{
  height: 13px;
  line-height: 13px;
}

.graph {
  display: grid;
  grid-template-columns: repeat(5, 60px);  /*竖向12列，21px宽*/
  grid-template-rows: repeat(5, 60px);     /*横向7列，21px宽*/
  padding-inline-start: 0px;
  grid-auto-flow: column;               /*生成7*12的格子后，设置为竖向排布*/
}

.li-month {
  display: inline-block;
}

.li-day {
  background-color: #eaeaea;
  list-style: none;             /*记得把list的圆点效果去掉*/
  margin: 1.5px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.li-day:hover {               /*添加hover强调效果*/
  box-shadow: 0px 0px 5px rgb(57, 120, 255);
}
.graph li[data-level="0"],.level1 {
  background-color: #47b0a8;
}

.graph li[data-level="1"],.level2 {
  background-color: #6db293;
}

.graph li[data-level="2"],.level3 {
  background-color: #9fb478;
}
.graph li[data-level="3"],.level3 {
  background-color: #d8b759;
}
.graph li[data-level="4"],.level3 {
  background-color: #f7b647;
}
.graph li[data-level="5"],.level3 {
  background-color: #f8a93e;
}
.graph li[data-level="6"],.level3 {
  background-color: #fa8e2b;
}
.graph li[data-level="7"],.level3 {
  background-color: #fb7f21;
}
.graph li[data-level="8"],.level3 {
  background-color: #fd630e;
}
.graph li[data-level="9"],.level3 {
  background-color: #ff5203;
}
.graph li[data-level="10"],.level3 {
  background-color: #ff5203;
}
</style>

